
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" style="   height: calc(100vh);">
<head>
    <meta charset="UTF-8">
    <title>网上鲜花系统-登录</title>
    <link rel="stylesheet" th:href="@{mall/styles/155.css}">
    <script th:src="@{mall/js/155.js}"></script>
    <!--    <script src="./js/login.js"></script>-->
    <link rel="stylesheet" th:href="@{mall/css/common.css}">
    <link rel="stylesheet" th:href="@{mall/styles/login.css}">
    <link rel="stylesheet" th:href="@{mall/styles/header.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <link rel="stylesheet" th:href="@{/admin/plugins/bootstrap/css/bootstrap.css}"/>
</head>
<body  style="   height: calc(100vh);">
<div class="top center "style="width: 100%;background-color: #124239">
    <div class="logo center"style="text-align: center">
        <a href="./index.html" target="_blank" style="font-size: 20px; display: block;color: #fff;padding-top: 20px;">网上鲜花系统</a>
        <span style="color: #ccc;font-family: monospace;">flowers and plants mall</span>
    </div>
</div>
<div class="login-wrapper" >
    <div class="form  center">
        <div class="login">
            <div class="login_center">
                <div class="login_top" style="color: #FFFFFF">
                    <div class="left fl">用户登录</div>
                    <div class="right fr">您还不是我们的用户？<a href="register.html" target="_self">立即注册</a></div>
                    <div class="clear"></div>
                    <div class="under-line center"></div>
                </div>
                <form id="loginForm" onsubmit="return false;" action="##">
                    <div class="login_main center">
                        <div class="login-info"><input class="login-info-input" type="text" name="loginName"
                                                       id="loginName"
                                                       placeholder="请输入你的手机号"/>
                        </div>
                        <div class="login-info"><input class="login-info-input"
                                                       id="password"
                                                       type="password"
                                                       name="password"
                                                       placeholder="请输入你的密码"/></div>
                        <div class="login-info">

                            <input class="login-info-input verify-code" type="text" name="verifyCode"
                                   placeholder="请输入验证码" id="verifyCode"/>
                            <img alt="单击图片刷新！" style="position: relative;" th:src="@{/common/mall/kaptcha}"
                                 onclick="this.src='/common/mall/kaptcha?d='+new Date()*1">
                        </div>
                    </div>
                    <div class="login_submit" >
                        <input class="submit" type="submit" onclick="login()" value="立即登录" style=" line-height: 40px">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<ul class="bg-squares">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    function login() {
        var loginName = $("#loginName").val();
        if (!validPhoneNumber(loginName)) {
            swal('请输入正确的登录名(即手机号)', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        var verifyCode = $("#verifyCode").val();
        if (!validLength(verifyCode, 7)) {
            swal('请输入正确的验证码', {
                icon: "error",
            });
            return false;
        }
        //验证
        var params = $("#loginForm").serialize();
        var url = '/login';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.resultCode == 200) {
                    window.location.href = '/index';
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
</html>